<template>
  <div class="layout-container-demo">
    <el-container>
      <el-main>
        <div class="student_counseling_stats container">
          <div class="table-responsive">
            <h5 class="table-title">咨询统计</h5>
            <el-table
                :data="studentCounselingStats"
                style="width: 100%"
                v-loading="loading"
                border
                stripe>
              <el-table-column
                  prop="counselingStatsId"
                  label="序号"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="student.name"
                  label="学生姓名">
              </el-table-column>
              <el-table-column
                  prop="counselingCount"
                  label="咨询次数">
              </el-table-column>
              <el-table-column
                  prop="counselingType"
                  label="咨询类型">
              </el-table-column>
              <el-table-column
                  prop="mentalHealthTrend"
                  label="心理健康趋势">
              </el-table-column>
              <el-table-column
                  label="操作"
                  width="180">
                <template slot-scope="scope">
                  <el-button @click="deleteCounselingStat(scope.row.counselingStatsId)" type="text" icon="el-icon-delete">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import request from '@/utils/request'; // 导入API请求配置

export default {
  data() {
    return {
      studentCounselingStats: [], // 存储咨询记录数据
      loading: false, // 控制表格加载状态
    };
  },
  created() {
    this.fetchCounselingStats();
  },
  methods: {
    fetchCounselingStats() {
      this.loading = true;
      request.get('/studentCounselingStats/getAllStudentCounselingStats').then(response => {
        this.studentCounselingStats = response;
        this.loading = false;
      }).catch(error => {
        console.error('Failed to fetch counseling records:', error);
        this.loading = false;
      });
    },
    deleteCounselingStat(id) {
      this.$confirm('此操作将永久删除该咨询记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        request.delete(`/studentCounselingStats/delete/${id}`).then(response => {
          this.fetchCounselingStats(); // 重新获取数据以刷新列表
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        }).catch(error => {
          console.error('Failed to delete counseling record:', error);
          this.$message({
            message: '删除失败',
            type: 'error'
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
};
</script>

<style scoped>
.layout-container-demo {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: flex-start; /* Align items to the top */
  height: 100vh; /* Use viewport height to center vertically */
  margin: 0;
  padding: 0;
  background-color: #dddddd;
}

.student_counseling_stats {
  width: 100%; /* Adjust the width to be more flexible */
  max-width: 1800px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

}

.table-responsive {
  overflow-x: auto;

}

.table-title {
  margin-bottom: 20px;
  font-size: 28px; /* Increase font size */
  color: #333;
  text-align: center;

}

/* Remove vertical lines from the table */
.el-table .el-table__body tr td:not(.is-hidden) {
  border-right: none;
}

/* Center text in table cells */
.el-table .cell {
  text-align: center;
  font-size: 16px;
}
.el-table {
  font-size: 14px;
}
</style>
